<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>横向日历图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 模拟数据
function getVirtualData(year) {
	const date = +echarts.time.parse(year + '-01-01');
	const end = +echarts.time.parse(+year + 1 + '-01-01');
	const dayTime = 3600 * 24 * 1000;
	const data = [];
	for (let time = date; time < end; time += dayTime) {
		data.push([
			echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
			Math.floor(Math.random() * 10000)
		]);
	}
	return data;
}

// 指定图表的配置项和数据
var option = {
	tooltip: {
		position: 'top',
		formatter: function (p) {
			const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
			return format + ': ' + p.data[1];
		}
	},
	visualMap: {
		min: 0,
		max: 10000,
		calculable: true,
		orient: 'horizontal',
		left: 'center',
		top: 'top'
	},
	calendar: [
		{
			cellSize: ['auto', 20],
			right: 10,
			// orient: 'horizontal',	//默认就是horizontal
			range: '2015'
		},
		{
			top: 260,
			cellSize: ['auto', 20],
			right: 10,
			// orient: 'horizontal',
			range: '2016'
		},
		{
			top: 450,
			cellSize: ['auto', 20],
			right: 10,
			// orient: 'horizontal',
			range: '2017',
		}
	],
	series: [
		{
			type: 'heatmap',
			coordinateSystem: 'calendar',
			calendarIndex: 0,
			data: getVirtualData('2015')
		},
		{
			type: 'heatmap',
			coordinateSystem: 'calendar',
			calendarIndex: 1,
			data: getVirtualData('2016')
		},
		{
			type: 'heatmap',
			coordinateSystem: 'calendar',
			calendarIndex: 2,
			data: getVirtualData('2017')
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 处理点击事件
myChart.on('click', function (params) {
	// console.log(params);
	console.log(params.data);
});

</script>
</html>
